<template>
  <div class="fangyuan">
    <h1>房源管理</h1>
	<!-- 模糊 -->
	<el-form :inline="true" :model="pageInfo" class="demo-form-inline">
	  <el-form-item>
	    <el-select v-model="pageInfo.cz" placeholder="请选择出租状态">
			<el-option label="请选择出租状态" value=""></el-option>
	      <el-option label="待租中" value="0"></el-option>
	      <el-option label="已出租" value="1"></el-option>
		  <el-option label="维修中" value="2"></el-option>
	    </el-select>
	  </el-form-item>
	  <el-form-item>
	    <el-select v-model="pageInfo.zt" placeholder="请选择发布状态">
		  <el-option label="请选择发布状态" value=""></el-option>
	      <el-option label="未发布" value="0"></el-option>
	      <el-option label="已发布" value="1"></el-option>
	    </el-select>
	  </el-form-item>
	  <el-form-item label="请输入楼盘关键字">
	    <el-input v-model="pageInfo.lp" placeholder="请输入楼盘关键字"></el-input>
	  </el-form-item>
	  <el-form-item label="请输入房源关键字">
	    <el-input v-model="pageInfo.fy" placeholder="请输入房源关键字"></el-input>
	  </el-form-item>
	  <el-form-item>
	    <el-button type="primary" @click="sousuo">查询</el-button>
	  </el-form-item>
	</el-form>
	<!-- 是否推荐 -->
	<el-button type="primary" icon="el-icon-edit" @click="upd">推荐房源</el-button>
	<el-button type="primary" icon="el-icon-edit" @click="upd">取消推荐</el-button>
	<!-- 列表 -->
	<el-table
	    ref="multipleTable"
	    :data="tableData"
	    tooltip-effect="dark"
	    style="width: 100%"
	    @selection-change="handleSelectionChange">
	    <el-table-column
	      type="selection"
	      width="55">
	    </el-table-column>

	    <el-table-column prop="id" label="id"  > </el-table-column>
	    <el-table-column label="房源图片"  >
			<template slot-scope="scope">
			  <img width="75px" height="75px" :src="scope.row.frontCover" alt="">
			</template>
		</el-table-column>
	    <el-table-column prop="roomName" label="房源名称"  > </el-table-column>
		<el-table-column prop="name" label="楼盘名称"  > </el-table-column>
		<el-table-column prop="roomCode" label="房源编号"  > </el-table-column>
		<el-table-column prop="proportion" label="面积"  > </el-table-column>
		<el-table-column prop="rental" label="租金"  > </el-table-column>
		<el-table-column label="出租状态"  >
			<template slot-scope="scope">
			  {{scope.row.status==0?"待租中":scope.row.status==1?"已出租":"维修中"}}
			</template>
		</el-table-column>
		<el-table-column prop="userName" label="发布人"  > </el-table-column>
		<el-table-column label="发布状态"  >
			<template slot-scope="scope">
			  {{scope.row.publishStatus==0?"未发布":"已发布"}}
			</template>
		</el-table-column>
		<el-table-column label="是否推荐"  >
			<template slot-scope="scope">
			  {{scope.row.recommended==2?"已推荐":"未推荐"}}
			</template>
		</el-table-column>

	  </el-table>

	  <!-- 分页 -->
	<el-pagination background layout="prev, pager, next"
		  :page-size="pageInfo.pageSize"
		  :total="pageInfo.total"
		  :page-count="pageInfo.pageCount"
		  :current-page="pageInfo.currPage"
		  @current-change="pageChange"
		  >
		</el-pagination>
  </div>
</template>
<script>
  export default {
	  created() {
	  	this.initlist()
	  },
    data() {
      return {
        tableData: [],
        multipleSelection: {
			id:"",
			recommended:""
		},
		pageInfo:{
			pageSize:10,
			total:1,
			pageCount:10,
			pageNum:1,
			cz:"",
			zt:"",
			lp:"",
			fy:""
		}
      }
    },

    methods: {
      initlist() {
        this.axios.post("http://localhost:10003/room-info/getList",this.pageInfo).then(res=>{
			this.tableData = res.data.records

			this.pageInfo.pageSize = res.data.size
			this.pageInfo.total = res.data.total
			this.pageInfo.pageCount = res.data.pages
			this.pageInfo.pageNum = res.data.current
		})
      },
	  pageChange(val){
		  this.pageInfo.pageNum = val
		  this.initlist()
	  },
	  sousuo(){
		  this.pageInfo.pageNum = 1
		  this.initlist()
	  },
      handleSelectionChange(vals) {
		  for (let val of vals) {
		  	this.multipleSelection.id = val.id
			this.multipleSelection.recommended = val.recommended
		  }

      },
	  upd(){
		  /* alert(JSON.stringify(this.multipleSelection)) */
		  console.log(this.multipleSelection)
		  if(this.multipleSelection.id==""){
			  this.$alert("请选择一条数据")
			  this.initlist()
		  }else{

			  this.axios.post("http://localhost:10003/room-info/upd",this.multipleSelection).then(res=>{
				  if(res.data){
					  this.$alert("操作成功!");
					  this.multipleSelection = {}
					  this.initlist()
				  }
			  })

		  }
	  }
    }
  }
</script>
